<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: homePath }">设备管理</el-breadcrumb-item>
          <el-breadcrumb-item>IEQ设备数据 - {{ name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-form :model="searchForm">
        <el-row :gutter="20"
                class="topLayout"
                type="flex"
                justify="start">
          <div class="inline">
            <el-button class="firstBtn"
                       :class="index == 0 ? 'selected' : ''"
                       type="default"
                       @click="changeTab(0)"
                       size="mini">近一天</el-button>
            <el-button type="default"
                       :class="index == 1 ? 'selected' : ''"
                       @click="changeTab(1)"
                       size="mini">近一周</el-button>
            <el-button class="lastBtn"
                       :class="index == 2 ? 'selected' : ''"
                       type="default"
                       @click="changeTab(2)"
                       size="mini">近一月</el-button>
          </div>
          <div class="inline"
               style="min-width:210px">
            <el-form-item label="开始日期"
                          style="width:100%">
              <el-date-picker :picker-options="pickerDateBegin"
                              class="datePicker"
                              size="mini"
                              v-model="searchForm.start"
                              type="date"
                              value-format="timestamp"
                              placeholder="开始日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="inline"
               style="min-width:210px">
            <el-form-item label="结束日期"
                          style="width:100%">
              <el-date-picker :picker-options="pickerDateEnd"
                              class="datePicker"
                              size="mini"
                              v-model="searchForm.end"
                              type="date"
                              value-format="timestamp"
                              placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </div>
          <div class="inline">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="m-l"
                       @click="getDeviceData()"
                       size="mini">搜索</el-button>
          </div>
        </el-row>
      </el-form>
    </el-card>
    <!--  设备数据表格  -->
    <div>
      <el-card class="m-t p-b">
        <el-col :span="12"
                class="m-t">
          <line-chart head-title="温度"
                      unit="℃"
                      :chart-data="temperatureChartData"
                      :chart-time="temperatureTimeData"
                      :min="number(temperatureChartMin)"
                      :max="number(temperatureChartMax)"
                      :interval="number(temperatureInterval)"
                      :markLineValue1="number(temperatureMarkLineValue1)"
                      :markLineValue2="number(temperatureMarkLineValue2)"
                      :markLineValue3="number(temperatureMarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                style="text-align: end;">
          <line-chart head-title="湿度"
                      unit="%"
                      :chart-data="humidityChartData"
                      :chart-time="humidityTimeData"
                      :min="number(humidityChartMin)"
                      :max="number(humidityChartMax)"
                      :interval="number(humidityInterval)"
                      :markLineValue1="number(humidityMarkLineValue1)"
                      :markLineValue2="number(humidityMarkLineValue2)"
                      :markLineValue3="number(humidityMarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="co2ChartData.length>0">
          <line-chart head-title="CO2"
                      unit="ppm"
                      :chart-data="co2ChartData"
                      :chart-time="co2TimeData"
                      :min="number(co2ChartMin)"
                      :max="number(co2ChartMax)"
                      :interval="number(co2Interval)"
                      :markLineValue1="number(co2MarkLineValue1)"
                      :markLineValue2="number(co2MarkLineValue2)"
                      :markLineValue3="number(co2MarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="pm25ChartData.length>0">
          <line-chart head-title="PM2.5"
                      unit="µg/m³"
                      :chart-data="pm25ChartData"
                      :chart-time="pm25TimeData"
                      :min="number(pm25ChartMin)"
                      :max="number(pm25ChartMax)"
                      :interval="number(pm25Interval)"
                      :markLineValue1="number(pm25MarkLineValue1)"
                      :markLineValue2="number(pm25MarkLineValue2)"
                      :markLineValue3="number(pm25MarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="pm10ChartData.length>0">
          <line-chart head-title="PM10"
                      unit="µg/m³"
                      :chart-data="pm10ChartData"
                      :chart-time="pm10TimeData"
                      :min="number(pm10ChartMin)"
                      :max="number(pm10ChartMax)"
                      :interval="number(pm10Interval)"
                      :markLineValue1="number(pm10MarkLineValue1)"
                      :markLineValue2="number(pm10MarkLineValue2)"
                      :markLineValue3="number(pm10MarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="noiseChartData.length>0">
          <line-chart head-title="噪声"
                      unit="dBA"
                      :chart-data="noiseChartData"
                      :chart-time="noiseTimeData"
                      :min="number(noiseChartMin)"
                      :max="number(noiseChartMax)"
                      :interval="number(noiseInterval)"
                      :markLineValue1="number(noiseMarkLineValue1)"
                      :markLineValue2="number(noiseMarkLineValue2)"
                      :markLineValue3="number(noiseMarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="luxChartData.length>0">
          <line-chart head-title="光照"
                      unit="lux"
                      :chart-data="luxChartData"
                      :chart-time="luxTimeData"
                      :min="number(luxChartMin)"
                      :max="number(luxChartMax)"
                      :interval="number(luxInterval)"
                      :markLineValue1="number(luxMarkLineValue1)"
                      :markLineValue2="number(luxMarkLineValue2)"
                      :markLineValue3="number(luxMarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="tvocChartData.length>0">
          <line-chart-tvoc head-title="TVOC"
                           unit="ppb"
                           :chart-data="tvocChartData"
                           :chart-time="tvocTimeData"
                           :min="number(tvocChartMin)"
                           :max="number(tvocChartMax)"
                           :interval="number(tvocInterval)"
                           :markLineValue1="number(tvocMarkLineValue1)"
                           :markLineValue2="number(tvocMarkLineValue2)"
                           :markLineValue3="number(tvocMarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="ch2oChartData.length>0">
          <line-chart head-title="甲醛"
                      unit="ppb"
                      :chart-data="ch2oChartData"
                      :chart-time="ch2oTimeData"
                      :min="number(ch2oChartMin)"
                      :max="number(ch2oChartMax)"
                      :interval="number(ch2oInterval)"
                      :markLineValue1="number(ch2oMarkLineValue1)"
                      :markLineValue2="number(ch2oMarkLineValue2)"
                      :markLineValue3="number(ch2oMarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="arpChartData.length>0">
          <line-chart head-title="气压"
                      unit="Pa"
                      :chart-data="arpChartData"
                      :chart-time="arpTimeData"
                      :min="number(arpChartMin)"
                      :max="number(arpChartMax)"
                      :interval="number(arpInterval)"
                      :markLineValue1="number(arpMarkLineValue1)"
                      :markLineValue2="number(arpMarkLineValue2)"
                      :markLineValue3="number(arpMarkLineValue3)" />
        </el-col>
        <el-col :span="12"
                class="m-t"
                v-if="windChartData.length>0">
          <line-chart-tvoc head-title="风速"
                      unit="m/s"
                      :chart-data="windChartData"
                      :chart-time="windTimeData"
                      :min="number(windChartMin)"
                      :max="number(windChartMax)"
                      :markLineValue1="number(windMarkLineValue1)"
                      :markLineValue2="number(windMarkLineValue2)"
                      :markLineValue3="number(windMarkLineValue3)" />
        </el-col>
      </el-card>
      <!--
        <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
          <scatter-diagram :chart-data="scatterDiagramData" />
        </el-row>
      -->
      <el-card class="m-t">
        <el-row>
          <histogram :chart-data="histogramChartData"
                     :chart-time="histogramTimeData"
                     head-title="设备在线率"
                     min="0"
                     max="100"
                     :interval="number(5)"
                     :name="name" />
        </el-row>
      </el-card>

      <el-card class="m-t">
        <el-row>
          <!--   设备数据表格上方操作按钮   -->
          <el-row>
            <el-button type="default" size="mini" icon="el-icon-download" @click="downloadData()">下载数据</el-button>
            <el-button type="default" size="mini" icon="el-icon-s-data" @click="adjust()">数据校准</el-button>
          </el-row>
          <el-table stripe
                    ref="multipleTable"
                    :data="tableData"
                    max-height="300"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <!--<el-table-column type="selection" width="55" />-->
            <el-table-column type="index"
                             label="编号"
                             min-width="60"
                             align="center"/>
            <el-table-column prop="ts"
                             label="日期"
                             :formatter="dateFormat"
                             min-width="150"
                             sortable />
            <el-table-column prop="val.TEMPERATURE"
                             label="温度(℃)"
                             min-width="140"
                             sortable >
              <template slot-scope="{row}">
                {{row.val.TEMPERATURE | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.HUMIDITY"
                             label="湿度(%)"
                             min-width="140"
                             sortable >
              <template slot-scope="{row}">
                {{row.val.HUMIDITY | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.CO2"
                             label="CO2(ppm)"
                             min-width="140"
                             v-if="co2ChartData.length>0"
                             sortable >
              <template slot-scope="{row}">
                {{row.val.CO2 | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.PM25"
                             label="PM2.5(µg/m³)"
                             min-width="140"
                             v-if="pm25ChartData.length>0"
                             sortable >
              <template slot-scope="{row}">
                {{row.val.PM25 | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.PM10"
                             label="PM10(µg/m³)"
                             min-width="140"
                             v-if="pm10ChartData.length>0"
                             sortable >
              <template slot-scope="{row}">
                {{row.val.PM10 | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.NOISE"
                             label="噪声(dBA)"
                             min-width="140"
                             v-if="noiseChartData.length>0"
                             sortable>
              <template slot-scope="{row}">
                {{row.val.NOISE | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.LUX"
                             label="光照(lux)"
                             min-width="140"
                             v-if="luxChartData.length>0"
                             sortable>
              <template slot-scope="{row}">
                {{row.val.LUX | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.TVOC"
                             label="TVOC(ppb)"
                             min-width="140"
                             v-if="tvocChartData.length>0"
                             sortable>
              <template slot-scope="{row}">
                {{row.val.TVOC | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.CH2O"
                             label="甲醛(ppb)"
                             min-width="140"
                             v-if="ch2oChartData.length>0"
                             sortable>
              <template slot-scope="{row}">
                {{row.val.CH2O | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.ARP"
                             label="气压(Pa)"
                             min-width="140"
                             v-if="arpChartData.length>0"
                             sortable>
              <template slot-scope="{row}">
                {{row.val.ARP | formatNumber}}
              </template>
            </el-table-column>
            <el-table-column prop="val.WIND"
                             label="风速(m/s)"
                             min-width="140"
                             v-if="windChartData.length>0"
                             sortable>
              <template slot-scope="{row}">
                {{row.val.WIND | formatNumber}}
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
    </div>
    <download :show-dialog="downloadShowDialog" @downloadVisible="downloadVisible" />
    <adjust :show-dialog="adjustShowDialog" :showCo2="co2ChartData.length>0?true:false" :showPm25="pm25ChartData.length>0?true:false" :showPm10="pm10ChartData.length>0?true:false" :showNoise="noiseChartData.length>0?true:false" :showLux="luxChartData.length>0?true:false" :showTvoc="tvocChartData.length>0?true:false" :showCh2o="ch2oChartData.length>0?true:false" :showArp="arpChartData.length>0?true:false" :showWind="windChartData.length>0?true:false" @adjustVisible="adjustVisible" @getDeviceData="getDeviceData"/>
  </div>
</template>

<script>
import LineChart from "./chart/LineChart2";
import LineChartTvoc from "./chart/LineChartTvoc";
import ScatterDiagram from "./chart/ScatterDiagram";
import Histogram from "./chart/Histogram";
import download from "@/views/deviceManage/components/download";
import adjust from "@/views/deviceManage/components/ieqAdjust";
import { getData, getFull, online } from "@/api/deviceManage";
import { formatDate } from "@/utils/utils";

export default {
  name: "IEQViewData",
  components: {
    LineChart,
    LineChartTvoc,
    ScatterDiagram,
    Histogram,
    download,
    adjust
  },
  data() {
    return {
      deviceId: "",
      name: "",
      index: 0,
      downloadShowDialog: false,
      adjustShowDialog: false,
      tableData: [],
      temperatureChartData: [],
      temperatureTimeData: [],
      temperatureChartMin: 0,
      temperatureChartMax: 30,
      temperatureInterval: 2,
      temperatureMarkLineValue1: 0,
      temperatureMarkLineValue2: 0,
      temperatureMarkLineValue3: 0,
      humidityChartData: [],
      humidityTimeData: [],
      humidityChartMin: 10,
      humidityChartMax: 100,
      humidityInterval: 10,
      humidityMarkLineValue1: 0,
      humidityMarkLineValue2: 0,
      humidityMarkLineValue3: 0,
      co2ChartData: [],
      co2TimeData: [],
      co2ChartMin: 400,
      co2ChartMax: 1400,
      co2Interval: 200,
      co2MarkLineValue1: 0,
      co2MarkLineValue2: 0,
      co2MarkLineValue3: 0,
      pm25ChartData: [],
      pm25TimeData: [],
      pm25ChartMin: 0,
      pm25ChartMax: 90,
      pm25Interval: 15,
      pm25MarkLineValue1: 0,
      pm25MarkLineValue2: 0,
      pm25MarkLineValue3: 0,
      luxChartData: [],
      luxTimeData: [],
      luxChartMin: 0,
      luxChartMax: 10,
      luxInterval: 2,
      luxMarkLineValue1: 0,
      luxMarkLineValue2: 0,
      luxMarkLineValue3: 0,
      pm10ChartData: [],
      pm10TimeData: [],
      pm10ChartMin: 0,
      pm10ChartMax: 90,
      pm10Interval: 15,
      pm10MarkLineValue1: 0,
      pm10MarkLineValue2: 0,
      pm10MarkLineValue3: 0,
      noiseChartData: [],
      noiseTimeData: [],
      noiseChartMin: 0,
      noiseChartMax: 100,
      noiseInterval: 10,
      noiseMarkLineValue1: 0,
      noiseMarkLineValue2: 0,
      noiseMarkLineValue3: 0,

      tvocChartData: [],
      tvocTimeData: [],
      tvocChartMin: 0,
      tvocChartMax: 100,
      tvocInterval: 10,
      tvocMarkLineValue1: 0,
      tvocMarkLineValue2: 0,
      tvocMarkLineValue3: 0,

      ch2oChartData: [],
      ch2oTimeData: [],
      ch2oChartMin: 0,
      ch2oChartMax: 10,
      ch2oInterval: 5,
      ch2oMarkLineValue1: 0,
      ch2oMarkLineValue2: 0,
      ch2oMarkLineValue3: 0,

      arpChartData: [],
      arpTimeData: [],
      arpChartMin: 0,
      arpChartMax: 10000,
      arpInterval: 100,
      arpMarkLineValue1: 0,
      arpMarkLineValue2: 0,
      arpMarkLineValue3: 0,

      windChartData: [],
      windTimeData: [],
      windChartMin: 0,
      windChartMax: 5,
      windInterval: 1,
      windMarkLineValue1: 0,
      windMarkLineValue2: 0,
      windMarkLineValue3: 0,

      scatterDiagramData: [],
      multipleSelection: [],
      dayCurrentPage: 1,
      histogramChartData: [],
      histogramTimeData: [],
      searchTime: [],
      searchForm: {
        start: "",
        end: ""
      },
      adjustData: [],
      homePath: "/deviceManage",
      pickerDateBegin: {
        disabledDate: (time) => {
          let endDateVal = new Date(this.searchForm.end);
          if (endDateVal) {
            return time.getTime() > endDateVal - 3600 * 1000 * 24 || time.getTime() < endDateVal - 3600 * 1000 * 24 * 30;
          } else {
            return time.getTime() > new Date().getTime() - 8.64e7;
          }
        }
      },
      pickerDateEnd: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    }
  },
  // 在 Vue 实例中定义过滤器
  filters: {
    formatNumber(value) {
      if (typeof value !== 'number') return value;
      const num = parseFloat(value.toFixed(1)); // 保留一位小数
      return num % 1 === 0 ? Math.round(num) : num;
    }
  },
  created() {
    this.deviceId = this.$route.query.deviceId;
    this.name = this.$route.query.name;
    this.page = this.$route.query.page;
    this.search = this.$route.query.search;
    let platformId = this.$route.query.platformId;
    if (platformId) {
      this.homePath = ``;
    } else {
      this.homePath = `${this.homePath}?page=${this.page}&search=${this.search}`;
    }
  },
  mounted() {
    this.changeTab(0);
    this.deviceId = this.$route.query.deviceId;
    this.getDeviceData();
  },
  methods: {
    getQuarter() {
      let date = new Date();
      let year = date.getFullYear();
      let nowTime = date.getTime();
      let spring_start = new Date(`${year}-3-16`).getTime();
      let spring_end = new Date(`${year}-5-14`).getTime();
      let summer_start = new Date(`${year}-5-15`).getTime();
      let summer_end = new Date(`${year}-9-15`).getTime();
      let autumn_start = new Date(`${year}-9-16`).getTime();
      let autumn_end = new Date(`${year}-11-14`).getTime();
      let spring = nowTime > spring_start && nowTime <= spring_end;
      let summer = nowTime > summer_start && nowTime <= summer_end;
      let autumn = nowTime > autumn_start && nowTime <= autumn_end;
      return spring ? 1 : summer ? 2 : autumn ? 3 : 4;
    },
    dateFormat(row) {
      return formatDate(new Date(row.ts));
    },
    downloadData() {
      this.downloadVisible(true);
      /*window.open(
        process.env.VUE_APP_BASE_IBEM_API +
          `/v2/device/data/import/download.csv?deviceId=` +
          this.deviceId +
          "&start=" +
          this.searchForm.start +
          "&end=" +
          this.searchForm.end
      );*/
    },
    adjust() {
      this.adjustVisible(true);
    },
    getDeviceData() {
      const that = this;
      //表格
      let data = {
        deviceId: this.deviceId,
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getFull(data).then(res => {
        const data = res.value;
        this.tableData = data.data;
      });
      // 温度
      let temperatureData = {
        deviceId: this.deviceId,
        type: "TEMPERATURE",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(temperatureData).then(res => {
        let data = res.value;
        that.handleData(data.data, 1).then(result => {
          let { xData, yData } = result;
          that.temperatureChartData = yData;
          that.temperatureTimeData = xData;
          let nowQuarter = this.getQuarter();
          if (nowQuarter == 2) {
            //如果是夏季
            that.temperatureChartMin = 22;
            that.temperatureChartMax = 32;
            that.temperatureMarkLineValue1 = 24;
            that.temperatureMarkLineValue2 = 26;
            that.temperatureMarkLineValue3 = 28;
          } else if (nowQuarter == 4) {
            //如果是冬季
            that.temperatureChartMin = 14;
            that.temperatureChartMax = 26;
            that.temperatureMarkLineValue1 = 18;
            that.temperatureMarkLineValue2 = 20;
            that.temperatureMarkLineValue3 = 22;
          } else {
            //如果是其他季节不显示基准线
            that.temperatureChartMin = 14;
            that.temperatureChartMax = 30;
            that.temperatureMarkLineValue1 = -10;
            that.temperatureMarkLineValue2 = -10;
            that.temperatureMarkLineValue3 = -10;
          }
          //console.log("设定温度最小值=" + that.temperatureChartMin+",最大值=" +that.temperatureChartMax);
          if (that.temperatureChartData.length > 0) {
            //获取数据中温度最小值
            let dataMin = Math.min.apply(null, that.temperatureChartData).toFixed(0);
            //获取数据中温度最大值
            let dataMax = Math.max.apply(null, that.temperatureChartData).toFixed(0);
            //console.log("获取温度最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减2℃
            if (dataMin < that.temperatureChartMin) {
              that.temperatureChartMin = Number(dataMin) - 2;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加2℃
            if (dataMax > that.temperatureChartMax) {
              that.temperatureChartMax = Number(dataMax) + 2;
            }
            //console.log("最终温度最小值=" + that.temperatureChartMin+"，最大值="+that.temperatureChartMax);
          }
        });
      });

      // 湿度
      let humidityData = {
        deviceId: this.deviceId,
        type: "HUMIDITY",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(humidityData).then(res => {
        let data = res.value;
        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.humidityChartData = yData;
          that.humidityTimeData = xData;
          let nowQuarter = this.getQuarter();
          if (nowQuarter == 1 || nowQuarter == 2) {
            //如果是春夏
            that.humidityChartMin = 40;
            that.humidityChartMax = 100;
            that.humidityMarkLineValue1 = -10;
            that.humidityMarkLineValue2 = -10;
            that.humidityMarkLineValue3 = 70;
          } else {
            //如果是秋冬
            that.humidityChartMin = 10;
            that.humidityChartMax = 60;
            that.humidityMarkLineValue1 = -10;
            that.humidityMarkLineValue2 = -10;
            that.humidityMarkLineValue3 = 30;
          }
          //console.log("设定湿度最小值=" + that.humidityChartMin+",最大值=" +that.humidityChartMax);
          if (that.humidityChartData.length > 0) {
            //获取数据中湿度最小值
            let dataMin = Math.min.apply(null, that.humidityChartData).toFixed(0);
            //获取数据中湿度最大值
            let dataMax = Math.max.apply(null, that.humidityChartData).toFixed(0);
            //console.log("获取湿度最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减10%
            if (dataMin < that.humidityChartMin) {
              that.humidityChartMin = Number(dataMin) - 10;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加10%
            if (dataMax > that.humidityChartMax) {
              that.humidityChartMax = Number(dataMax) + 10;
            }
            //console.log("最终湿度最小值=" + that.humidityChartMin+"，最大值="+that.humidityChartMax);
          }
        });
      });

      // CO2
      let co2Data = {
        deviceId: this.deviceId,
        type: "CO2",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(co2Data).then(res => {
        let data = res.value;
        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.co2ChartData = yData;
          that.co2TimeData = xData;
          //console.log("设定CO2最小值=" + that.co2ChartMin+",最大值=" +that.co2ChartMax);
          if (that.co2ChartData.length > 0) {
            //获取数据中CO2最小值
            let dataMin = Math.min.apply(null, that.co2ChartData).toFixed(0);
            //获取数据中CO2最大值
            let dataMax = Math.max.apply(null, that.co2ChartData).toFixed(0);
            //console.log("获取CO2最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为0ppm
            if (dataMin < that.co2ChartMin) {
              that.co2ChartMin = 0;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加200ppm
            if (dataMax > that.co2ChartMax) {
              that.co2ChartMax = Number(dataMax) + 200;
            }
            //console.log("最终CO2最小值=" + that.co2ChartMin+"，最大值="+that.co2ChartMax);
            that.co2MarkLineValue1 = -10;
            that.co2MarkLineValue2 = -10;
            that.co2MarkLineValue3 = 1000;
          }
        });
      });

      // PM25
      let pm25Data = {
        deviceId: this.deviceId,
        type: "PM25",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(pm25Data).then(res => {
        let data = res.value;
        this.pm25ChartMin = 0;
        this.pm25ChartMax = 90;

        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.pm25ChartData = yData;
          that.pm25TimeData = xData;
          //console.log("设定PM25最小值=" + that.pm25ChartMin+",最大值=" +that.pm25ChartMax);
          if (that.pm25ChartData.length > 0) {
            //获取数据中PM25最小值
            let dataMin = Math.min.apply(null, that.pm25ChartData).toFixed(0);
            //获取数据中PM25最大值
            let dataMax = Math.max.apply(null, that.pm25ChartData).toFixed(0);
            //console.log("获取PM25最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减15µg/m³
            if (dataMin < that.pm25ChartMin) {
              that.pm25ChartMin = Number(dataMax) - 15;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加15µg/m³
            if (dataMax > that.pm25ChartMax) {
              that.pm25ChartMax = Number(dataMax) + 15;
            }
            if (that.pm25ChartMax > 180) {
              this.pm25Interval = 30;
            } else if (that.pm25ChartMax > 270) {
              this.pm25Interval = 40;
            } else if (that.pm25ChartMax > 360) {
              this.pm25Interval = 50;
            } else if (that.pm25ChartMax > 450) {
              this.pm25Interval = 60;
            } else if (that.pm25ChartMax > 540) {
              this.pm25Interval = 70;
            } else if (that.pm25ChartMax > 720) {
              this.pm25Interval = 80;
            }
            //console.log("最终PM25最小值=" + that.pm25ChartMin+"，最大值="+that.pm25ChartMax);
            that.pm25MarkLineValue1 = 30;
            that.pm25MarkLineValue2 = -10;
            that.pm25MarkLineValue3 = 75;
          }
        });
      });

      // LUX
      let luxData = {
        deviceId: this.deviceId,
        type: "LUX",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(luxData).then(res => {
        let data = res.value;
        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.luxChartData = yData;
          that.luxTimeData = xData;
          //console.log("设定LUX最小值=" + that.luxChartMin+",最大值=" +that.luxChartMax);
          if (that.luxChartData.length > 0) {
            //获取数据中LUX最小值
            let dataMin = Math.min.apply(null, that.luxChartData).toFixed(0);
            //获取数据中LUX最大值
            let dataMax = Math.max.apply(null, that.luxChartData).toFixed(0);
            //根据数据最大值动态调整纵坐标数据间隔
            that.luxInterval = dataMax / 6;
            //console.log("获取LUX最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减10lux
            if (dataMin < that.luxChartMin) {
              that.luxChartMin = Number(dataMax) - 10;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加10lux
            if (dataMax > that.luxChartMax) {
              that.luxChartMax = Number(dataMax) + 10;
            }
            if (that.luxChartMax > 5) {
              this.luxInterval = 2;
            } else if (that.luxChartMax > 50) {
              this.luxInterval = 10;
            } else if (that.luxChartMax > 100) {
              this.luxInterval = 50;
            } else if (that.luxChartMax > 200) {
              this.luxInterval = 100;
            } else if (that.luxChartMax > 300) {
              this.luxInterval = 150;
            } else if (that.luxChartMax > 400) {
              this.luxInterval = 200;
            } else if (that.luxChartMax > 500) {
              this.luxInterval = 300;
            }
            //console.log("最终LUX最小值=" + that.luxChartMin+"，最大值="+that.luxChartMax);
            that.luxMarkLineValue1 = -10;
            that.luxMarkLineValue2 = -10;
            that.luxMarkLineValue3 = -10;
          }
        });
      });

      // PM10
      let pm10Data = {
        deviceId: this.deviceId,
        type: "PM10",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(pm10Data).then(res => {
        let data = res.value;
        this.pm10ChartMin = 0;
        this.pm10ChartMax = 90;

        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.pm10ChartData = yData;
          that.pm10TimeData = xData;
          //console.log("设定PM10最小值=" + that.pm10ChartMin+",最大值=" +that.pm10ChartMax);
          if (that.pm10ChartData.length > 0) {
            //获取数据中pm10最小值
            let dataMin = Math.min.apply(null, that.pm10ChartData).toFixed(0);
            //获取数据中pm10最大值
            let dataMax = Math.max.apply(null, that.pm10ChartData).toFixed(0);
            //console.log("获取PM10最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减15µg/m³
            if (dataMin < that.pm10ChartMin) {
              that.pm10ChartMin = Number(dataMax) - 15;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加15µg/m³
            if (dataMax > that.pm10ChartMax) {
              that.pm10ChartMax = Number(dataMax) + 15;
            }
            if (that.pm10ChartMax > 180) {
              that.pm10Interval = 30;
            } else if (that.pm10ChartMax > 270) {
              that.pm10Interval = 40;
            } else if (that.pm10ChartMax > 360) {
              that.pm10Interval = 50;
            } else if (that.pm10ChartMax > 450) {
              that.pm10Interval = 60;
            } else if (that.pm10ChartMax > 540) {
              that.pm10Interval = 70;
            } else if (that.pm10ChartMax > 720) {
              that.pm10Interval = 80;
            }
            //console.log("最终PM10最小值=" + that.pm10ChartMin+"，最大值="+that.pm10ChartMax);
            that.pm10MarkLineValue1 = 30;
            that.pm10MarkLineValue2 = -10;
            that.pm10MarkLineValue3 = 75;
          }
        });
      });

      // 噪声
      let noiseData = {
        deviceId: this.deviceId,
        type: "NOISE",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(noiseData).then(res => {
        let data = res.value;
        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.noiseChartData = yData;
          that.noiseTimeData = xData;
          //console.log("设定噪声最小值=" + that.noiseChartMin+",最大值=" +that.noiseChartMax);
          if (that.noiseChartData.length > 0) {
            //获取数据中噪声最小值
            let dataMin = Math.min.apply(null, that.noiseChartData).toFixed(0);
            //获取数据中噪声最大值
            let dataMax = Math.max.apply(null, that.noiseChartData).toFixed(0);
            //console.log("获取噪声最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减10
            if (dataMin < that.noiseChartMin) {
              that.noiseChartMin = Number(dataMax) - 10;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加10
            if (dataMax > that.noiseChartMax) {
              that.noiseChartMax = Number(dataMax) + 10;
            }
            //console.log("最终噪声最小值=" + that.noiseChartMin+"，最大值="+that.noiseChartMax);
            that.noiseMarkLineValue1 = -10;
            that.noiseMarkLineValue2 = -10;
            that.noiseMarkLineValue3 = -10;
          }
        });
      });

      // TVOC
      let tvocData = {
        deviceId: this.deviceId,
        type: "TVOC",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(tvocData).then(res => {
        let data = res.value;
        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;

          that.tvocChartData = yData.map(e => {
            return (Number(e)).toFixed(2);
          });
          that.tvocTimeData = xData;
          //console.log("设定TVOC最小值=" + that.tvocChartMin+",最大值=" +that.tvocChartMax);
          if (that.tvocChartData.length > 0) {
            //获取数据中TVOC最小值
            let dataMin = Math.min.apply(null, that.tvocChartData).toFixed(0);
            //获取数据中TVOC最大值
            let dataMax = Math.max.apply(null, that.tvocChartData).toFixed(0);
            //console.log("获取TVOC最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减10
            if (dataMin < that.tvocChartMin) {
              that.tvocChartMin = Number(dataMax) - 10;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加10
            if (dataMax > that.tvocChartMax) {
              that.tvocChartMax = Number(dataMax) + 10;
            }
            if (that.tvocChartMax > 100) {
              this.tvocInterval = 20;
            } else if (that.tvocChartMax > 150) {
              this.tvocInterval = 30;
            } else if (that.tvocChartMax > 200) {
              this.tvocInterval = 40;
            } else if (that.tvocChartMax > 300) {
              this.tvocInterval = 50;
            } else if (that.tvocChartMax > 500) {
              this.tvocInterval = 80;
            } else if (that.tvocChartMax > 800) {
              this.tvocInterval = 100;
            } else if (that.tvocChartMax > 1000) {
              this.tvocInterval = 300;
            }
            //console.log("最终TVOC最小值=" + that.tvocChartMin+"，最大值="+that.tvocChartMax);
            that.tvocMarkLineValue1 = -10;
            that.tvocMarkLineValue2 = -10;
            that.tvocMarkLineValue3 = -10;
          }
        });
      });

      // 甲醛
      let ch2oData = {
        deviceId: this.deviceId,
        type: "CH2O",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(ch2oData).then(res => {
        let data = res.value;
        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.ch2oChartData = yData;
          that.ch2oTimeData = xData;
          //console.log("设定甲醛最小值=" + that.ch2oChartMin+",最大值=" +that.ch2oChartMax);
          if (that.ch2oChartData.length > 0) {
            //获取数据中甲醛最小值
            let dataMin = Math.min.apply(null, that.ch2oChartData).toFixed(0);
            //获取数据中甲醛最大值
            let dataMax = Math.max.apply(null, that.ch2oChartData).toFixed(0);
            //console.log("获取甲醛最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减10
            if (dataMin < that.ch2oChartMin) {
              that.ch2oChartMin = Number(dataMax) - 10;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加10
            if (dataMax > that.ch2oChartMax) {
              that.ch2oChartMax = Number(dataMax) + 10;
            }
            //console.log("最终甲醛最小值=" + that.ch2oChartMin+"，最大值="+that.ch2oChartMax);
            that.ch2oMarkLineValue1 = -10;
            that.ch2oMarkLineValue2 = -10;
            that.ch2oMarkLineValue3 = -10;
          }
        });
      });

      // 气压
      let arpData = {
        deviceId: this.deviceId,
        type: "ARP",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(arpData).then(res => {
        let data = res.value;
        that.handleData(data.data, 0).then(result => {
          let { xData, yData } = result;
          that.arpChartData = yData;
          that.arpTimeData = xData;
          //console.log("设定气压最小值=" + that.arpChartMin+",最大值=" +that.arpChartMax);
          if (that.arpChartData.length > 0) {
            //获取数据中气压最小值
            let dataMin = Math.min.apply(null, that.arpChartData).toFixed(0);
            //获取数据中气压最大值
            let dataMax = Math.max.apply(null, that.arpChartData).toFixed(0);
            //console.log("获取气压最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小值，则最小值为数据最小值减10
            if (dataMin < that.arpChartMin) {
              that.arpChartMin = Number(dataMax) - 10;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加10
            if (dataMax > that.arpChartMax) {
              that.arpChartMax = Number(dataMax) + 10;
            }
            if (dataMax > 100000) {
              that.arpChartMax = 120000;
            } else if (dataMax > 80000) {
              that.arpChartMax = 85000;
            } else if (dataMax > 50000) {
              that.arpChartMax = 55000;
            } else if (dataMax > 20000) {
              that.arpChartMax = 22000;
            } else if (dataMax > 10000) {
              that.arpChartMax = 12000;
            } else if (dataMax > 5000) {
              that.arpChartMax = 6000;
            } else if (dataMax > 1000) {
              that.arpChartMax = 2000;
            }
            //console.log("最终气压最小值=" + that.arpChartMin+"，最大值="+that.arpChartMax);
            that.arpMarkLineValue1 = -10;
            that.arpMarkLineValue2 = -10;
            that.arpMarkLineValue3 = -10;
          }
        });
      });

      // 风速
      let windData = {
        deviceId: this.deviceId,
        type: "WIND",
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      getData(windData).then(res => {
        let data = res.value;
        that.handleData(data.data, 2).then(result => {
          let { xData, yData } = result;
          that.windChartData = yData;
          that.windTimeData = xData;
          //console.log("设定最小值=" + that.windChartMin+",最大值=" +that.windChartMax);
          if (that.windChartData.length > 0) {
            //获取数据中风速最小值
            let dataMin = Math.min.apply(null, that.windChartData).toFixed(0);
            //获取数据中风速最大值
            let dataMax = Math.max.apply(null, that.windChartData).toFixed(0);
            //console.log("获取风速最小值=" + dataMin + "，最大值=" + dataMax);
            //如果数据中的最小值小于设定的最小吗值，则最小值为数据最小值减1
            if (dataMin < that.windChartMin) {
              that.windChartMin = Number(dataMax) - 1;
            }
            //如果数据中的最大值大于设定的最大值，则最大值为数据最大值加1
            if (dataMax > that.windChartMax) {
              that.windChartMax = Number(dataMax) + 1;
            }
            //console.log("最终风速最小值=" + that.windChartMin+"，最大值="+that.windChartMax);
            that.windMarkLineValue1 = -10;
            that.windMarkLineValue2 = -10;
            that.windMarkLineValue3 = -10;
          }
        });
      });

      //在线率
      let onLineData = {
        deviceId: this.deviceId,
        start: this.searchForm.start,
        end: this.searchForm.end
      };
      online(onLineData).then(res => {
        let data = res.value;
        that.handleData(data.data, 2).then(result => {
          let { xData, yData } = result;
          that.histogramChartData = yData;
          that.histogramTimeData = xData;
        });
      });
    },
    handleData(data, scale) {
      return new Promise((resolve, reject) => {
        let xData = [];
        let yData = [];
        for (let i = 0; i < data.length; i++) {
          data[i].ts = formatDate(new Date(data[i].ts));
          if (data[i].val) {
            data[i].val = Number(data[i].val.toFixed(scale));
          } else {
            data[i].val = 0;
          }
          xData.push(data[i].ts.substring(5, 16));
          yData.push(data[i].val);
        }
        resolve({ xData, yData });
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    number(val) {
      return Number(val);
    },
    changeTab(num) {
      this.index = num;
      this.searchForm.end = new Date().getTime();
      if (num == 0) {
        this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24;
      } else if (num == 1) {
        this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24 * 7;
      } else {
        this.searchForm.start = new Date().getTime() - 3600 * 1000 * 24 * 30;
      }
      this.searchTime = [];
      this.getDeviceData();
    },
    downloadVisible(e) {
      this.downloadShowDialog = e;
    },
    adjustVisible(e) {
      this.adjustShowDialog = e;
    }
  }
};
</script>
<style>
.topLayout .el-form-item {
  margin-bottom: 0px;
}
.flex-box .el-form-item {
  margin-bottom: 0px;
}
</style>
<style scoped>
.header {
  /* margin: 20px; */
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
.topLayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.flex-box {
  align-items: center;
}

.firstBtn {
  border-radius: 20px 0 0 20px;
}

.lastBtn {
  border-radius: 0 20px 20px 0;
}

.btnGroup .el-button {
  margin-left: 2px;
}

.inline {
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.timeCase {
  max-width: 300px;
}

.selected {
  background-color: #1890ff;
  color: #fff;
}

.m-l {
  margin-left: 20px;
}

.datePicker {
  width: 140px;
}
</style>
